博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React二维数组渲染 跳转详情传值
阅读量:4980 次
发布时间:2019-06-12

本文共 4659 字,大约阅读时间需要 15 分钟。

React路由配置 菜品列表二维数组渲染 跳转详情传值

import React, { Component } from 'react';import {Link } from "react-router-dom";const axios = require('axios');class Home extends Component {    constructor(props) {        super(props);        this.state = {             list:[],            domain:'http://a.itying.com/'         };    }    requestData=()=>{        var api=this.state.domain+'api/productlist';        axios.get(api)        .then((response)=>{                      console.log(response);            this.setState({                list:response.data.result            })        })        .catch(function (error) {                   console.log(error);        })            }    componentDidMount(){        this.requestData();    }    render() {        return (            
{ this.state.list.map((value,key)=>{ return(

{value.title}

    { value.list.map((v,k)=>{ return(
  • {v.title}

    {v.price}元

  • ) }) }
) }) }
); }}export default Home;
/*react解析html    https://reactjs.org/docs/dom-elements.html        
*/import React, { Component } from 'react';import {Link } from "react-router-dom";const axios = require('axios');class Pcontent extends Component { constructor(props) { super(props); this.state = { list:[], domain:'http://a.itying.com/' }; } requestData(id){ var api=this.state.domain+'api/productcontent?id='+id; axios.get(api) .then((response)=>{ console.log(response); this.setState({ list:response.data.result[0] }) }) .catch(function (error) { console.log(error); }) } componentWillMount(){ //id console.log(this.props.match.params.id) let id=this.props.match.params.id; this.requestData(id); } render() { return (
返回

{
this.state.list.title}

{

this.state.list.price}/份

商品详情

数量:
-
+
); }}export default Pcontent;

 

转载于:https://www.cnblogs.com/wyanblog/p/10996759.html

你可能感兴趣的文章
关于golang.org/x包问题
查看>>
PHP $_SERVER['PHP_SELF']、$_SERVER['SCRIPT_NAME'] 与 $_SERVER['REQUEST_URI'] 之间的区别
查看>>
第一次过程性考核
查看>>
linux 安装 mysql
查看>>
Java中HashMap,LinkedHashMap,TreeMap的区别
查看>>
老菜鸟说给新菜鸟的存储基础知识
查看>>
web.xml详解
查看>>
插入排序
查看>>
浅谈微信公众平台运用的场景
查看>>
Moctf--Pubg题目
查看>>
ORM框架与mysql数据库的无缝对接
查看>>
在centos上使用yum安装rabbitmq-server
查看>>
SpringBoot项目如何打War包
查看>>
Managing Dynamic Objects in C++
查看>>
计算excel列的名字
查看>>
自助Linux之问题诊断工具strace
查看>>
JDBC为什么要使用PreparedStatement而不是Statement
查看>>
delphi调用LUA函数来处理一些逻辑
查看>>
MySQL下分页查询数据
查看>>
解题报告 幸福的道路
查看>>